<template>
  <section>
    <div class="top" >
      <template v-if="activity.activityPicture"><img :src="'/api/file/' + activity.activityPicture" alt=""></template>
      <p>{{ activity.title }}</p>
<!--      <span v-if="activity.join" class="pictrue" @click="tap('myImg',activity.id)">我的图集</span>-->
    </div>
    <div class="wrapper">
      <div class="caption">
        <p>
          <van-icon name="clock-o" size="16" /><span
            >{{ activity.startTime }} 至 {{ activity.endTime }}</span
          >
        </p>
        <p>
          <van-icon name="location-o" size="16" /><span>{{
            activity.address
          }}</span>
        </p>
        <p>
          <van-icon name="friends-o" size="16" /><span
            >已报名 {{ activity.enterNum }} / {{activity.limitNum?'限报名':'不限'}}
            {{ activity.limitNum }}</span
          >
        </p>
      </div>
      <template v-if="typeof this.activity.attachmentStr!='string'">
        <h2>附件</h2>
        <div class="attachment" >
          <p v-for="(item,index) in activity.attachment">
            {{index+1}}：<a :href="`/api/file/${item.url}`" target="_black">{{item.originName}}</a>
          </p>
        </div>
      </template>
      <h2>活动内容</h2>
      <div class="content">
        {{ activity.introduce }}
      </div>
      <template  v-if="activity.notes">
        <h2>报名须知</h2>
        <div class="content">
          {{ activity.notes }}
        </div>
      </template>
    </div>
    <p v-if="!activity.join" @click="isTap">活动参与</p>
    <p v-if="activity.join" >活动已参与</p>
  </section>
</template>
<script>
import api from "@/data/api/index.js";
import Vue from "vue";
import { Icon } from "vant";
import { Toast } from 'vant';

Vue.use(Icon);
Vue.use(Toast);

export default {
  data() {
    return {
      id: "", //活动id
      activity: {}, //活动详情
    };
  },
  methods: {
    getActivityDetail(id) {
      api.activityDetail(id).then((res) => {

          res.startTime = res.startTime.substring(0, res.startTime.length - 3);
          res.endTime = res.endTime.substring(0, res.endTime.length - 3);
          this.activity = res;

      });
    },
    // 跳转活动参与页
    tap(link,id) {
      var data = { id };
      this.$troute.query(link,data);
    },
    isTap(){
      api.checkActivity(this.id).then(res=>{
        if(res.code=='success'){
          this.tap('maApply',this.activity.id)
        }else{
          Toast(res.desc);
        }

      })

    },
    // 跳转活动参与页
    // 取消活动参与
    cancelApply(id) {
      api.ALCTRegistration(id).then(res => {
        if (res.code == "success") {
          Toast("操作成功");
        } else {
          Toast(res.desc);
        }
        this.getActivityDetail(this.id);
      });
    },
  },
  mounted() {
    let str = this.$route.query.tdata;
    //this.id=JSON.parse(str).id;
    this.id = str;
    this.getActivityDetail(this.id);
  },
};
</script>
<style lang="scss" scoped>
section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(100% - 46px);
  > p {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 15px;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    background-color: #9e0f16;
    border-radius: 25px;
    z-index:50
  }
}
.top {

  background: #931116 url(../imgs/activity-bg.png) no-repeat right bottom;
  background-size: contain;
  position: relative;
  >img{
    width: 100%;
  }
  p {
    position: absolute;
    top: 60px;
    left: 20px;
    transform: translate(0%,-20%);
    color: #fff;
    font-size: 28px;
  }
  .pictrue{
    display: inline-block;
    position: absolute;
    left:0;
    bottom:65px;
    font-size: 14px;
    background: rgba(0,0,0,.5);
    padding: 5px 20px 7px 20px;
    border-radius: 0 15px 15px 0;
    color: #fff;
  }
}
.wrapper {
  width: 100vw;
  margin-top: -50px;
  box-sizing: border-box;
  overflow: auto;
  padding: 20px 20px 80px 20px;
  border-radius: 50px 0 0 0;
  background-color: #fff;
  position: relative;
  > h2 {
    position: relative;
    display: inline-block;
    font-size: 20px;
    margin: 0 0 15px 10px;
    z-index: 1;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 1px;
      height: 5px;
      background-color: #c9151e;
      z-index: -1;
    }
  }
  .caption {
    margin: 0 0 15px 10px;
    p {
      display: flex;
      align-items: center;
      line-height: 1.75em;
      color: #666;
      span {
        margin-left: 10px;
      }
    }
  }
  .content {
    line-height: 1.75em;
    font-size: 15px;
    text-indent: 2em;
    text-align: justify;
    p {
      margin: 1em 0;
    }
  }
  .attachment{
    line-height:1.8;
    font-size: 15px;
    margin-left:15px;
    p{
      margin-bottom:5px;
    }
  }
}
</style>
